<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回顾Object.defineProperty方法</title>
</head>
<body>
  <!-- 数据劫持 数据代理 计算属性 -->
  <script>
    let number = 19;
    let person = {
      name: '张三',
      sex: '男',
      age: 18
    }

    Object.defineProperty(person, 'age', {
      // value: 18,
      // enumerable: true, // 可列举的 作用：控制属性是否可以枚举，默认值是false
      // writable: true, // 控制属性是否可以被修改，默认值是false
      // configurable: true, // 可配置的 控制属性是否可以被删除，默认值是false
      
      // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值 
      get: function() {
        console.dir('有人读取age属性了')
        return number   // invoke property getter 映射
      },
      // 当有人修改person的age属性时，set函数（setter）就会被调用，且会受到修改的具体值
      set(value) {
        console.dir('有人修改了age属性，且值是', value)
        number = value
      }
    })

    // console.log(person)
    // // 不直接写在person对象中输出的age颜色淡一些，age不能被枚举（遍历） 
    // console.log(Object.keys(person)) // 直接写在person对象中可以

    // for (const key in person) {
    //   console.log(key)
    // }

    // 直接写在person对象中可以使用 person.age更改值；delete person.name 删除
    // Object.defineProperty 不能更改

  </script>
</body>
</html>